<template>
  <div id="carShow"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading">

    <v-title title="项目管理看板"></v-title>

    <div style="position: relative;">
      <v-condition :isMultiple="true"></v-condition>
      <div class="item2">
        <label for="selectd">项目状态:</label>
        <el-select id="selectd"
         multiple
         class="marT"
         @change="statusChange"
         v-model="prjStatus"
         clearable
         filterable
         placeholder="请选择"
         >
          <el-option
            v-for="item in prjOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="more">
        <div class="AM" >
          <label for="cascader">AM:</label>
          <el-cascader
            class="sele"
            v-model="projectList2"
            placeholder="请选择"
            :options="options2"
            :props="props"
            @focus="test('AM')"
            @change="toChange($event,'AM')"
            collapse-tags
            clearable
            filterable
            style="width:150px"
            ></el-cascader>
        </div>
        <div class="PM">
          <label for="cascader">PM:</label>
          <el-cascader
            class="sele"
            v-model="projectList3"
            placeholder="请选择"
            :options="options3"
            :props="props"
            @focus="test('PM')"
            @change="toChange($event,'PM')"
            collapse-tags
            clearable
            filterable
            style="width:150px"></el-cascader>
        </div>
        <div class="custom" >
          <label for="cascader">客户简称:</label>
          <el-cascader
            class="sele"
            v-model="projectList4"
            placeholder="请选择"
            :options="options4"
            :props="props"
            @focus="test('客户简称')"
            @change="toChange($event,'客户简称')"
            collapse-tags
            clearable
            filterable
            style="width:150px"></el-cascader>
        </div>
        <div class="riskLevel">
          <label for="cascader">项目风险等级:</label>
          <el-cascader
            class="sele"
            v-model="projectList5"
            placeholder="请选择"
            :options="options5"
            :props="props"
            @focus="test('项目风险等级')"
            @change="toChange($event,'项目风险等级')"
            collapse-tags
            clearable
            filterable
            style="width:150px"></el-cascader>
        </div>
        <div class='deliver_center'>
          <label for="deliver_center">主交付/产品中心:</label>
          <el-select
              clearable
              v-model="deliver_center"
              multiple
              collapse-tags
              filterable
              @change='deliverChange'
              placeholder="请选择主交付/产品中心"
              class='customSelect'

          >
            <el-row style="margin-left: 9%" >
              <el-col :lg='12' :xl='12' :xs='12'>
                <div ><el-button size='mini' @click='selectAllDelivery'>全选</el-button></div>
              </el-col>
              <el-col :lg='12' :xl='12' :xs='12'>
                <div><el-button size='mini' @click='toggleSelectAllDelivery'>反选</el-button></div>
              </el-col>
            </el-row>
            <el-option
                v-for="item in deliverCenterList"
                :key="item.value"
                :label="item.label"
                style="width: 100%;"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
    </div>

    <div class="btn-group2">
      <el-button v-if="exporting" class="down" @click="down" type="success" round>导出报表</el-button>
      <el-button v-if="control" class="jump" @click="permission" type="primary" round>权限配置</el-button>
      <el-button v-if="config" class="jump" @click="jump" type="primary" round>看板配置</el-button>
      <el-button v-if="record" class="update" @click="update" type="info" round >数据更新记录</el-button>
    </div>

    <transition name="fade">
        <div v-show="isShowTop" class="toTop" @click="toTop">
          <el-image
            style="width: 50px; height: 50px"
            :src="top"
            fit="cover"></el-image>
        </div>
    </transition>

    <!--<el-button class="marT posi" type="primary" round @click="reloaded">重置筛选</el-button>-->

    <div style="padding-bottom: 50px;" ref="top" class="table marT" :style="{'height': table['BU自评']['default'].length > 10 ? '580px':'auto'}" v-if="Object.keys(table).length">
      <div class="flexTable"
        :key="item + index"
        v-for="(item, index) in Object.keys(table)"
        >
        <el-table
          v-if="table[item][isShowList[index].isFolder].length"
          ref="multipleTable"
          :border="true"
          :header-cell-style="{background:'#42b1e8'}"
          :data="table[item][isShowList[index].isFolder]"
          style="width: 100%"
          :id="item === '操作' ? 'operate' : ''"
          >
          <el-table-column
            :label="item"
            align="center"

          >
            <template slot-scope="scope" slot="header">
              <div class="span" v-if="item !== '项目风险管理' && item !== '本周周报状态' && item !== 'BU自评' && item !== '操作'" @click="toggle(item)">
                {{item}}
                <template>
                  <i :class="returnClass(isShowList[index].isFolder)" v-if="item!=='操作'"></i>
                </template>
              </div>
              <div class="span" v-else>
                {{item}}
              </div>
            </template>

            <el-table-column
              :width="column === '项目' ? 152 : 124"
              v-for="(column, index2) in Object.keys(table[item][isShowList[index].isFolder][0])"
              :key="column+index2"
              :label="column"
              align="center"
            >
              <template slot-scope="scope" slot="header">
                <span v-if="item !== '操作'">{{column === '交付中心' ? '主交付/产品中心' : column}}</span>
                <i v-if="item !== '操作'" class="el-icon-caret-bottom" @click.prevent.stop="filterItem(table[item][isShowList[index].isFolder], column, index, item)"></i>
                <el-dialog
                  title="筛选列表"
                  :visible.sync="table[item][isShowList[index].isFolder][0][column].is_show"
                  width="20%"
                  :append-to-body="true"
                  >
                  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                  <el-checkbox-group v-model="checkList" @change="handleCheckedChange">
                      <el-checkbox class="display-check" :key="label" v-for="label in list" :label="label"></el-checkbox>
                    </el-checkbox-group>
                    <div class="fix">
                      <div class="border"></div>
                      <span class="border-span" @click="filterInitResult(column,params,index,item)">筛选</span>
                      <span class="border-span" @click="resetInitResult(column,params,index,item)">重置</span>
                    </div>
                </el-dialog>
              </template>


              <template slot-scope="scope">
                <div class="item wordWrap"  v-if="scope.row.hasOwnProperty('录入')">
                  <span v-if="entrys" @click="entryOperate(scope.row[column])" style="{color: dimgray;cursor: pointer;}">编辑</span>
                  <span v-else>无权编辑</span>
                </div>
                <template v-else>
                  <!-- 弹框 -->
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="(scope.row[column].hasOwnProperty('not_apply_state') &&
                     scope.row[column]['value'] === '-' ||
                     scope.row[column]['value'] === '不适用' ) ? scope.row[column]['not_apply_state'] : (scope.row[column]['risk_reason'] ||
                     `未填写${scope.row[column]['value']}原因`)"

                    placement="top"
                    v-if="scope.row[column]['value'] == '高风险' ||
                      scope.row[column]['value'] == '中风险'||
                      scope.row[column]['value'] === '-' ||
                      scope.row[column]['value'] === '不适用' ||
                      (item === 'BU自评' && scope.row[column]['value'] !== '' && scope.row[column]['value'] !== '低风险') ||
                      scope.row[column].hasOwnProperty('tooltip')">

                      <div @click="close(column, index, item)"
                        class="wordWrap"
                        :class="[statusClass(scope.row[column]['value']), statusClass2(scope.row[column]['risk_level'])]">
                        {{ scope.row[column]['value'] || '/'}}
                      </div>
                  </el-tooltip>
                  <div
                    class="item wordWrap"
                    v-else
                    :class="[statusClass(scope.row[column]['value']), statusClass2(scope.row[column]['risk_level'])]">
                    {{ scope.row[column]['value'] || '/' }}
                  </div>

                </template>
              </template>

            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
       <el-pagination
        class="marT posi2"
        v-show="total >= 10"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="current"
        background
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>

    <el-drawer
      size="90%"
      :visible.sync="drawer"
      :direction="direction"
      id="drawer"
    >
      <span>数据更新情况</span>
      <div class="table">

        <label>最近更新时间:</label>
        <el-select @change="timeChange" clearable class="marT" v-model="timeArea" placeholder="请选择更新时间">
          <el-option
            v-for="item in timeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <label style="margin-left: 20px;">是否更新:</label>
        <el-select @change="upDateChange" clearable class="marT" v-model="checkboxUpdate" placeholder="请选择是否更新">
          <el-option
            v-for="item in updates"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-table
          v-loading="tableLoading"
          class="marT"
          :border="true"
          :header-cell-style="{background: 'rgb(50, 65, 90)'}"
          :data="base.slice((baseCurrent-1)*baseSize, baseCurrent*baseSize)"
          fit
          style="width: 100%"
          >
            <el-table-column
              label="项目"
              align="center"
              prop="project_name">
            </el-table-column>
            <el-table-column
              label="项目基础信息"
              align="center"
              >
              <template slot-scope="scope">
                <v-button :statusObj="scope.row.base_info"></v-button>
              </template>
            </el-table-column>
            <el-table-column
              label="进度风险"
              align="center">
              <template slot-scope="scope">
                <v-button :statusObj="scope.row.progress_risk"></v-button>
              </template>
            </el-table-column>

            <el-table-column
              label="阶段点风险"
              align="center"
            >
              <template slot-scope="scope">
                <v-button :statusObj="scope.row.milestone_risk"></v-button>
              </template>
            </el-table-column>
            <el-table-column
              label="技术风险"
              align="center"
            >
              <template slot-scope="scope">
                <v-button :statusObj="scope.row.tech_risk"></v-button>
              </template>
            </el-table-column>
            <el-table-column
              label="质量风险"
              align="center"
            >
              <template slot-scope="scope">
                <v-button :statusObj="scope.row.quality_risk"></v-button>
              </template>
            </el-table-column>
            <el-table-column
              label="成本风险"
              align="center"
            >
              <template slot-scope="scope">
                <v-button :statusObj="scope.row.cost"></v-button>
              </template>
            </el-table-column>

            <el-table-column
              label="商务风险"
              align="center"
            >
              <template slot-scope="scope">
                <v-button :statusObj="scope.row.commerce_risk"></v-button>
              </template>
            </el-table-column>

            <el-table-column
              label="客户满意度"
              align="center"
            >
              <template slot-scope="scope">
                <v-button :statusObj="scope.row.customer_satisfaction"></v-button>
              </template>
            </el-table-column>

            <el-table-column
              label="BU自评"
              align="center"
            >
              <template slot-scope="scope">
                <v-button :statusObj="scope.row.self_assessment"></v-button>
              </template>
            </el-table-column>

            <el-table-column
              label="更新人"
              align="center"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.operator }}</div>
              </template>
            </el-table-column>

            <el-table-column
              label="最近更新时间"
              align="center"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.update_time }}</div>
              </template>
            </el-table-column>

            <el-table-column
              label="分类"
              align="center"
            >
              <template slot-scope="scope">
                <div style="cursor: pointer;" @click="dialogResult(scope.row.project_id)" class="details">
                  查看详情
                </div>
              </template>
            </el-table-column>
        </el-table>
        <el-pagination class="marT"
          v-show="baseTotal > 10"
          background
          :page-size="baseSize"
          @current-change="baseCurrentChange"
          :current-page="baseCurrent"
          @size-change="baseSizeChange"
          layout="total, prev, pager, next, jumper"
          style="text-align: left"
          :total="baseTotal">
        </el-pagination>
      </div>
    </el-drawer>

    <el-dialog width="80%" title="更新详情" :visible.sync="dialogTableVisible">
      <v-dialog
        v-if="dialogTableVisible"
        id="dialog"
        :tableList="dialogData"
        :tableListLabel="tableListLabel"
      ></v-dialog>
    </el-dialog>
  </div>
</template>

<script>
import Cookies from 'js-cookie';
import VTitle from '@/views/sys/internetThings/title';
import VCondition from '@/views/data/carDispose/group';
import { mapMutations, mapState } from 'vuex';
import http from '@/views/sys/axios';
import VButton from '../button';
import VDialog from '@/views/qa/dialog';


export default {
    name: 'CarShow',
    components: {
      VTitle,
      VCondition,
      VButton,
      VDialog
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        if(vm.dispose.projectIdList.length) {
          if(vm.config) {
            vm.getLookResult()
          }
        }

      })
    },
    computed: {
      ...mapState({
        dispose: state => state.conditions.dispose,
        entryList: state => state.entryItem,
        aaa: state => state.group.xzxm,
      }),
      exporting() {
        let status = false
        status = this.entryList.car_export_perm === 1 ? true : false
        return status
      },
      control() {
        let status = false
        status = this.entryList.car_control_perm === 1 ? true : false
        return status
      },
      config() {
        let status = false
        status = this.entryList.car_config_perm === 1 ? true : false
        return status
      },
      record() {
        let status = false
        status = this.entryList.car_record_perm === 1 ? true : false
        return status
      },
      entrys() {
        let status = false
        status = this.entryList.car_entry_perm === 1 ? true : false
        return status
      }
    },

    // watch: {
    //   selected(newData){
    //     if (this.isClick) return
    //     this.isClick = true

    //     this.getOptionsResult()
    //     setTimeout(()=>{this.isClick = false}, 3000)
    //   }
    // },
    created(){
        this.getTabledata()
        this.getFilter([],"")
        this.initialDeliverCenterList()
    },
    mounted() {
      window.addEventListener('scroll', this.screenScroll)
      if(this.dispose.projectIdList.length) {
        // this.getInitResult(true)
      }
      setTimeout(() => {
          this.test('AM')
      }, 500)
      setTimeout(() => {
          this.test('PM')
      }, 1000)
      setTimeout(() => {
          this.test('客户简称')
      }, 1500)
      setTimeout(() => {
          this.test('项目风险等级')
      }, 2000)
      },
      destroyed() {
        window.removeEventListener('scroll', this.screenScroll)
        clearInterval(this.tmp)
      },
    data() {
      return {
        remPraAM:'',
        remPraPM :'',
        remPraCusname :'',
        remPraLevel :'',
        projectList2:[],
        projectList3:[],
        projectList4:[],
        projectList5:[],
        deliverCenterList:[],
        oriDeliverCenterList:[],
        deliver_center:[],
        options5:[],
        options4:[],
        options3:[],
        options2:[],
        tmp: null,
        props: { multiple: true },
        AMData:{},
        PMData:{},
        CosData:{},
        NaData:{},
        prjOptions: [
          {
            label: '变更',
            value: 0
          },
          // {
          //   label: '封存',
          //   value: 1
          // },
          {
            label: '项目结项',
            value: 2
          },
          {
            label: '立项',
            value: 3
          },
          // {
          //   label: '终止',
          //   value: 4
          // },
          {
            label: '研发结项',
            value: 5
          }
        ],
        conditionProjects:[],
        conditionProjectsstatus:[],
        rightData:'',
        prjStatus: [],
        projectList:null,
        tableLoading: false,
        drawer: false,
        direction: 'rtl',
        isShowList: [],
        table: {},
        tableInit: {},
        column: [],
        datas: {},
        datas2: {},
        isIndeterminate: true,
        checkAll: false,
        isShowTop: false,
        checkList: [],
        checkAll: [],
        params: [],
        list: [],
        size: 0,
        loading: false,
        current: 1,
        sized: 0,
        total: 0,
        base: [],
        baseTotal: 0,
        baseSize: 10,
        baseCurrent: 1,
        dialogTableVisible: false,
        dialogData: [],
        timeArea: '',
        checkboxUpdate: '',
        updates: [
          {
            value: true,
            label: '已更新'
          },
          {
            value: false,
            label: '未更新'
          }
        ],
        currentTime: [],
        timeOptions: [
          {
            value: 'three',
            label: '3天'
          },
          {
            value: 'seven',
            label: '7天'
          },
          {
            value: 'weeks',
            label: '14天'
          }
        ],
        radio: '',
        tableListLabel: [
          {
              label: '项目',
              param: 'project_name',
              align: 'center'
          },
          {
              label: '更新模块',
              param: 'dimension',
              align: 'center'
          },
          {
              label: '更新项',
              param: 'examine_item',
              align: 'center'
          },
          {
              label: '修改者',
              param: 'operator',
              align: 'center'
          },
          {
              label: '修改日志',
              param: 'operator_log',
              align: 'center'
          },
          {
              label: '更新时间',
              param: 'create_time',
              align: 'center'
          }
        ],
        top: require('../../../../assets/top.png')
      }
    },
    inject: ['reload'],
    methods: {
      mouseover(ee){
        console.log(ee,'hahahah')
      },
      ...mapMutations('conditions', [
        'setDispose'
      ]),
      getTabledata(){
        const self = this
        http.get(`/api/data_summary/car/project/user/filter`)
        .then(res => {
          const { data,code } = res
          if (Object.keys(res.condition).length > 0) {
            self.datas2 = res.condition
          } else {
            self.datas2 = {"projects": this.dispose.projectIdList}
          }
          if(code === 200){
            console.log(2323)
             http.post(`/api/data_summary/car/project/data?page=${self.current}`, self.datas2)
             .then(res => {
              self.loading = true
              const { code, result, count } = res
              if(code === 200) {
                self.prjStatus = self.datas2.project_status
                let list = result
                self.loading = false
                self.table = result
                self.tableInit = list
                self.total = count
                Object.keys(self.table).forEach(key => {
                  if(key === 'BU自评') {
                    self.isShowList.push({
                      isFolder: 'extension',
                      keyVal: key,
                      isShow: false
                    })
                  } else {
                    self.isShowList.push({
                      isFolder: 'default',
                      keyVal: key,
                      isShow: false
                    })
                  }
                })
              }
            })
              }
            })
      },
      down() {
        this.loading = true
        let data = {}
        data.projects = this.dispose.projectIdList

        http.post(`/api/data_summary/car/project/file/download`, data, { responseType: 'blob' })
        .then(res => {
          const { data, code } = res
          if(code === 200) {
            this.loading = false
            let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            link.setAttribute('download', '汽车管理看板数据模板.xlsx')
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(link.href)
            document.body.removeChild(link)

          } else {
            this.loading = false
            this.$message.error('下载出错了!');
          }
        }).catch(err => {
          const { data } = err

          if(data) {
            let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            link.setAttribute('download', '汽车管理看板报表.xlsx')
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(link.href)
            document.body.removeChild(link)
            this.loading = false
            this.$message({
              showClose: true,
              message: '导出成功!',
              type: 'success'
            });
          } else {
            this.$message.error('下载出错了!');
          }
        })
      },
      jump() {
        this.$router.push({
          path: '/car/ai-car/carDispose'
        })
      },
      permission() {
        this.$router.push({
          path: '/car/ai-car/carPermission'
        })
      },
      update() {
        // this.getLookResult()
        this.drawer = true
      },
      baseCurrentChange(val) {
        this.baseCurrent = val
      },
      baseSizeChange(val) {
        this.baseSize = val
      },
      statusChange(val) {
        this.getLookResult()
        this.getInitResult()
      },
      toChange(val,type) {
        let list = {}
        val.forEach((item,index)=>{
          if(item[0] == '项目风险等级（BU自评）') {
            if(!list['项目风险等级']) {
              list['项目风险等级'] = []
            }
            list['项目风险等级'].push(item[1])
          } else {
            if(!list[item[0]]) {
              list[item[0]] = []
            }
            list[item[0]].push(item[1])
          }
        })
        this.datas[type] = val.map((v) => {
          return v[0]
        })

        this.getLookResult()
        this.getInitResult()
      },
      getNowFormatDate(cycle) {
        let date = new Date();
        let date2 = new Date();
        date2.setDate(date2.getDate() - cycle);
        let seperator1 = "-";
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let strDate = date.getDate();

        let year2 = date2.getFullYear();
        let month2 = date2.getMonth() + 1;
        let strDate2 = date2.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }

        if (month2 >= 1 && month2 <= 9) {
            month2 = "0" + month2;
        }
        if (strDate2 >= 0 && strDate2 <= 9) {
            strDate2 = "0" + strDate2;
        }
        let currentdate = year + seperator1 + month + seperator1 + strDate;
        let currentdate2 = year2 + seperator1 + month2 + seperator1 + strDate2;
        this.currentTime = [currentdate, currentdate2];
      },
      upDateChange(val) {
        this.getLookResult()
      },
      cycleTimeCalc(value) {
        let cycle
        if(value === 'three') {
          cycle = 3
          this.getNowFormatDate(cycle)
        } else if(value === 'seven') {
          cycle = 7
          this.getNowFormatDate(cycle)
        } else {
          cycle = 14
          this.getNowFormatDate(cycle)
        }
      },
      timeChange(val) {
        this.cycleTimeCalc(val)
        this.getLookResult()
      },
      getLook() {
        let data = {}
        data.projects = this.dispose.projectIdList
        data.update_time = this.currentTime
        if(this.checkboxUpdate !== '') {
          data.is_updated = this.checkboxUpdate
        }
        data.project_status = this.prjStatus

        return http.post(`/api/data_summary/car/project/operate/info`, data)
      },
      async getLookResult() {
        this.tableLoading = true
        try {

          //const { code, result } = await this.getLook()
          // if(code === 200 ) {
          //   this.tableLoading = false
          //   this.base = result
          //   this.baseTotal = this.base.length
          // } else {
          //   this.tableLoading = false
          // }

            this.tableLoading = false
            this.base = []
            this.baseTotal = this.base.length
        } catch(err) {
          this.tableLoading = false
          throw err
        }
      },
      showDialog(id) {
        return http.get(`/api/data_summary/car/project/record?projectId=${id}`)
      },
      async dialogResult(id) {
        try {
          this.dialogTableVisible = true
          const { code, result } = await this.showDialog(id)
          if(code === 200) {
            this.dialogData = result
          }
        } catch(err) {
          throw new Error(err)
        }
      },
      handleCheckAllChange(val) {
        this.checkList = val ? this.list : [];
        this.isIndeterminate = false;
      },
      handleCheckedChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.list.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.list.length;
      },
      handleSizeChange(val) {
        this.sized = val
        this.datas['交付中心'] = this.deliver_center
      },
      handleCurrentChange(val) {
        this.current = val
        // this.datas2['交付中心'] = this.deliver_center
        this.pageList()
        // this.getInitResult()
      },
      filterItem(array, key, index, item) {

        this.table[item][this.isShowList[index].isFolder][0][key].is_show = !this.table[item][this.isShowList[index].isFolder][0][key].is_show
        // this.isShowList[index].isShow = !this.isShowList[index].isShow
        this.getFilter(array, key)
        this.checkList = []
      },
      close(key, index, item) {
        this.table[item][this.isShowList[index].isFolder][0][key]['is_show'] = false
        // this.$set(this.table[item][this.isShowList[index].isFolder][0][key], 'is_show', false)
      },
      toggle(key) {
        this.isShowList.forEach(item => {
          // if(item.isFolder === 'extension') {
          //   item.isFolder = 'default'
          // }

          if(item.keyVal === key) {
            if(item.keyVal !== 'BU自评' || item.keyVal !== '项目风险管理') {
              if(item.isFolder === 'default') {
                item.isFolder = 'extension'
                this.loading = true
                setTimeout(() => {
                  this.loading = false
                }, 1000)
              } else {
                item.isFolder = 'default'
              }
            } else {
              item.isFolder = 'extension'
            }
          }
        })
        this.$refs.multipleTable.forEach(item => {
          item.clearSelection();
        })
      },
      toTop() {
        this.$refs.top.scrollIntoView({behavior: "smooth"})
      },
      screenScroll() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        let clientHeight = document.documentElement.clientHeight;
        scrollTop > clientHeight / 3 ? this.isShowTop = true : this.isShowTop = false
      },
      async filterChange(keys, value) {
        let arr = []
        Object.keys(keys).forEach(key => {
          arr.push(...keys[key])
        })
        value = this.column
        this.filterInitResult(value, arr)
      },
      returnClass(condition) {
        return condition === 'default' ? 'el-icon-circle-plus-outline' : 'el-icon-remove-outline'
      },
      statusClass(item) {
        switch (item) {
          case '高风险':
            return 'high';
            break;
          case '中风险':
            return 'middle';
            break;
          case '低风险':
            return 'low';
            break;
          default:
            return '';
            break;
        }
      },
      statusClass2(item) {
        switch (item) {
          case 3:
            return 'high';
            break;
          case 2:
            return 'middle';
            break;
          case 1:
            return 'low';
            break;
          default:
            return '';
            break;
        }
      },
      entryOperate(project) {
        this.setDispose({
            options: [project.group_name, project.dept_name, project.project_id],
            projectId: project.project_id
          })
        let filterInfo = Cookies.get('filterInfo') ? JSON.parse(Cookies.get('filterInfo')) : {}
        filterInfo = Object.assign(filterInfo,this.datas2)
        delete filterInfo.projects
        delete filterInfo.project_status
        Cookies.set('filterInfo', filterInfo)
        this.$router.push({
          path: '/CarSupplement'
        })
      },
      // 更多 数据
	       async test(optionData,item){
          // if(this.datas.AM || this.datas.PM || this.datas.客户简称 || this.datas.项目风险等级 ) return

            let data = this.datas
            data.projects = this.dispose.projectIdList
            data.name = optionData
            data.project_status = this.prjStatus

            let obj = Object.keys(this.datas)
            obj.forEach(name => {
              name === item && delete this.datas[name]
            })

            http.post(`/api/data_summary/car/project/condition`,data)
            .then(res => {
              const { code, result } = res
              if(code === 200) {
                let res = Array.from(new Set(result))
                res = res.filter(fil => fil !== null)
                let opt = []
                for(let i = 0;i<res.length;i++){
                  opt.push({
                    value:res[i],
                    label:res[i]
                  })
                }
                switch (optionData) {
                  case 'AM' :
                    this.projectList2 = data.project_status
                    this.options2 = []
                    for(let i = 0;i<res.length;i++){
                      this.options2.push({
                        value:res[i],
                        label:res[i]
                      })
                    }
                    break;
                  case 'PM' :
                    this.projectList3 = data.project_status
                    this.options3 = []
                    for(let i = 0;i<res.length;i++){
                      this.options3.push({
                        value:res[i],
                        label:res[i]
                      })
                    }
                    break;
                  case '客户简称' :
                  this.projectList4 = data.project_status
                    this.options4 = []
                    for(let i = 0;i<res.length;i++){
                      this.options4.push({
                        value:res[i],
                        label:res[i]
                      })
                    }
                     break;
                  case '项目风险等级' :
                    this.projectList5 = data.project_status
                    this.options5 = []
                    for(let i = 0;i<res.length;i++){
                      this.options5.push({
                        value:res[i],
                        label:res[i]
                      })
                    }
                    break;
                }
              } else {
              }
            }).catch(err => {
              throw err
            })
       },
      getFilter(array, key) {
        // let value = []
        if (key === '交付中心') {
          this.list = this.oriDeliverCenterList.map(item => item.core_name)
          return
        }
        array = this.checkList
        array = array.map(val => {
          if(val == null) {
            val = ''
          }
          return val
        })
        this.datas[key] = array
        this.datas.projects = this.dispose.projectIdList
        this.datas.name = key
        this.datas.project_status = this.prjStatus
        //this.datas = Object.assign(this.datas, this.datas2)

        http.post(`/api/data_summary/car/project/condition`, this.datas).then(res => {
          const { code, result } = res
          // this.checkList = []
          if(code === 200) {
            let res = Array.from(new Set(result))
            res = res.filter(fil => fil !== null)
            this.list = res
          } else {
            this.list = []
          }
        }).catch(err => {
          throw err
        })
      },

      // 分页
       pageList() {
        this.datas2.projects = this.dispose.projectIdList
        this.datas2.project_status = this.prjStatus

        if(!this.datas2.AM){
          this.datas2.AM =  this.remPraAM
        }
        if(!this.datas2.PM){
          this.datas2.PM =  this.remPraPM
        }
        if(!this.datas2.客户简称){
          this.datas2.客户简称 =  this.remPraCusname
        }
        if(!this.datas2.项目风险等级){
          this.datas2.项目风险等级 =  this.remPraAM
        }
        http.post(`/api/data_summary/car/project/data?page=${this.current}&projects=${this.dispose.projectIdList}&project_status=${this.prjStatus}`, this.datas2)
        .then(res => {
          this.loading = true
          const { code, result, count } = res
          if(code === 200) {
            let list = result
            this.loading = false
            this.table = result
            this.tableInit = list
            this.total = count

            Object.keys(this.table).forEach(key => {
              if(key === 'BU自评') {
                this.isShowList.push({
                  isFolder: 'extension',
                  keyVal: key,
                  isShow: false
                })
              } else {
                this.isShowList.push({
                  isFolder: 'default',
                  keyVal: key,
                  isShow: false
                })
              }
            })
            // .catch(err => {
            //   throw new Error(err)
            //   this.loading = false
            // })
          }
        })
      },
      // 三角筛选
      filterInit(item, value) {
        if (item === '交付中心') {
          this.deliver_center = []
        }
        value = this.checkList
        value = value.map(val => {
          if(val == null) {
            val = ''
          }
          return val
        })
        this.current = 1
        this.datas2[item] = value
        this.datas2.projects = this.dispose.projectIdList
        this.datas2.project_status = this.prjStatus
        return http.post(`/api/data_summary/car/project/data?page=${this.current}`, this.datas2)
      },
      reseting(item, value) {
        value = this.checkList
        value = value.map(val => {
          if(val == null) {
            val = ''
          }
          return val
        })
        this.current = 1
        // this.datas2[name] = name
        this.datas2.projects = this.dispose.projectIdList
        this.datas2.project_status = this.prjStatus
        let obj = Object.keys(this.datas2)
        obj.forEach(name => {
          name === item && delete this.datas2[name]
        })
        return http.post(`/api/data_summary/car/project/data?page=${this.current}`, this.datas2)
      },
      async resetInitResult(item, value, index, key) {
        try {
          this.close(item, index, key)
          const { code, result, count } = await this.reseting(item, value)
          if(code === 200) {
            let list = result
            this.table = result
            this.tableInit = list
            this.total = count
            this.checkList = []
          }
        } catch(err) {
          throw err
        }
      },
      async filterInitResult(item, value, index, key) {
        try {
          this.close(item, index, key)
          if (item === '主交付/产品中心') {
            item = '交付中心'
          }

          const { code, result, count } = await this.filterInit(item, value)
          if(code === 200) {
            let list = result
            this.table = result
            this.tableInit = list
            this.total = count
            this.checkList = []
          }
        } catch(err) {
          throw new Error(err)
        }
      },
      reloaded() {
        this.reload()
      },
      // 更多筛选
      getInit(item,first) {
        let data = this.datas
        if(first) {
          data = Cookies.get('filterInfo')? JSON.parse(Cookies.get('filterInfo')) : {}
          this.datas2 = Object.assign(this.datas2,data)
          Cookies.remove('filterInfo')
        }
        if(this.dispose.projectIdList.length > 0) {
          data.projects = this.dispose.projectIdList
        }
        data.project_status = this.prjStatus

          this.remPraAM = data.AM
          this.remPraPM = data.PM
          this.remPraCusname = data.客户简称
          this.remPraLevel = data.项目风险等级


          let obj1 = Object.keys(this.datas)
          obj1.forEach(name => {
          name === item && delete this.datas[name]
        })
        return http.post(`/api/data_summary/car/project/data?page=${this.current}&projects=${this.dispose.projectIdList}&project_status=${this.prjStatus}`, data)

      },
      async getInitResult(first) {
        try {
          this.loading = true
          const { code, result, count } = await this.getInit(first)
          if(code === 200) {
            let list = result
            this.loading = false
            this.table = result
            this.tableInit = list
            this.total = count
            // this.total = this.table['项目基础信息/端到端体制'].default.length
            Object.keys(this.table).forEach(key => {
              if(key === 'BU自评') {
                this.isShowList.push({
                  isFolder: 'extension',
                  keyVal: key,
                  isShow: false
                })
              } else {
                this.isShowList.push({
                  isFolder: 'default',
                  keyVal: key,
                  isShow: false
                })
              }
            })
          }
        }catch(err) {
          throw new Error(err)
          this.loading = false
        }
      },
      async initialDeliverCenterList() {
        const {success, data} = await this.getDeliverCenterList()
        if (success) {
          this.oriDeliverCenterList = data
          this.deliverCenterList = data.map(item => {
            return {
              label: item.core_name,
              value: item.core_name,
            }
          })
        }
      },
      getDeliverCenterList() {
        return http.get(`/api/report/project/weekly/report/deliver_center`)
      },
      selectAllDelivery() {
        this.deliver_center = this.deliverCenterList.map(item => item.value)
        this.getLookResult()
        this.getInitResult()
      },
      toggleSelectAllDelivery() {
        this.deliver_center = this.deliverCenterList.filter(item => !this.deliver_center.includes(item.value)).map(item => item.value)
        this.getLookResult()
        this.getInitResult()
      },
      deliverChange(val) {
        this.datas['交付中心'] = this.deliver_center
        this.getLookResult()
        this.getInitResult()
      },
    },
    watch: {
      aaa() {
        this.getLookResult()
        this.getInitResult()
      },
      dispose: {
        handler: function(newVal) {
          if(this.dispose.projectIdList.length) {
            // this.getInitResult()
            // if(this.config) {
            //   this.getLookResult()
            // }
            }
        },
        deep: true
      },
      // dialogTableVisible(newVal) {
      //   if(!newVal) {
      //     this.dialogData = []
      //   }
      // }
    }
  }
</script>

<style lang="scss" scoped>
  @import url("../../../../styles/dis.scss");

  #dialog >>> .el-table thead{
    color: #909399;
  }
  /deep/ .el-table thead {
    color: #fff;
  }
  /deep/.el-select>.el-input {
     width: 60%;
  }
  /deep/ .el-table th.gutter{
    display: table-cell!important;
  }
  /deep/ .el-table colgroup.gutter{
    display: table-cell!important;
  }
  /deep/ .el-drawer.rtl{
    padding: 10px 36px;
    overflow: auto;
  }
  /deep/ .el-table__column-filter-trigger i{
    color: #fff;
    font-size: 18px;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    margin-left: 5px;
  }
  /deep/ .el-table th{
    padding: 0;
    height: 100px;
    position: relative;
  }

  /deep/ .el-table--border th:first-child .cell{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /deep/ .el-table th div{
    white-space: initial;
    width: 100%;
  }
  /deep/ .el-tooltip__popper.is-dark{
    max-width: 210px;
  }
  .sele{
    margin-left: 35px;
  }
  .more{
    display: flex;
    background: #ffffff;
    padding: 20px;
    flex-direction: row;

    .PM ,.custom , .riskLevel, .deliver_center{
        margin-left: 30px;
    }
  }
  /deep/.sele[data-v-03a2012a] {
    margin-left: 3px;
  }
  #more{
    position: absolute;
    left: 51%;
    width: 20%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    top: 19px;
    span{
      margin-right: 25px;
    }
  }
  .item2{
    position: absolute;
    left: 480px;
    width: 17%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    label{
      margin: auto;
      margin-top: 30px;
    }
  }
  .display-check{
    display: block;
  }
  .posi2{
    position: absolute;
    z-index: 99;
    bottom: 52px;
  }
  .btn-group2{
    position: absolute;
    top: 150px;
    right: 60px;
    .down, .jump{

    }
  }
  .border{
    border-bottom: 2px solid #ddd;
    margin-top: 12px;
  }
  .border-span{
    cursor: pointer;
    margin-top: 12px;
    display: inline-block;
  }
  .filters{
    max-height: 200px;
    min-height: 100px;
    background: #fff;
    font-size: 12px;
    color: #999;
    overflow-y: scroll;
    position: absolute;
    border: 1px solid #ebeef5;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    box-sizing: border-box;
    margin: 2px 12px;
    transform-origin: center top;
    z-index: 2010;
    text-align: left;
    top: 40px;
    z-index: 9999;
  }
  .wrapper{
    position: relative;
  }
  /deep/ .el-table th div.filters{
    width: 150px;
    max-width: 250px;
    word-wrap: break-word;
    word-break: normal;
    overflow-x: scroll;
    white-space: normal;
  }
  #operate >>> .el-table__column-filter-trigger i{
    display: none;
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  .posi{
    position: absolute;
    top: 129px;
    right: 42%;
  }
  .toTop{
    position: fixed;
    bottom: 80px;
    right: 25px;
    z-index: 10;
  }
  #carShow{
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
    .btn-group{
      text-align: right;
    }
    .table{
      overflow-x: auto;
      .flexTable{
        display: table-cell;
        position: relative;
        .span{
          cursor: pointer;
        }
      }
      .wordWrap{
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
  }
  @media screen and (max-width: 1440px){
    .item2{
      position: absolute;
      left: 34%;
      width: 27%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .posi {
      position: absolute;
      top: 33px;
      right: 6%;
    }
  }
  .marT{
      margin-top: 20px;
  }
  .high{
    color: #e4393c;
  }
  .middle{
    color: #e6a23c;
  }
  .low{
    color: #67c23a;
  }
  /deep/ .el-select .el-input {
    width: 100%;
  }
</style>
